@include('share.__header')
<link rel="stylesheet" href="{{asset('cardArticle1/css/cardArticle1.css')}}">

    <div class="clearfix" style="height:0;"></div>
    <!--[2]main-->
    <main>
      @foreach($detail as $v)
        <div class="cardArticle">
            <div class="cardAuthor">
                <a href="" class="authorImgA">
                    <img src="{{asset('storage').$v->avatar}}" alt="" class="authorImg">
                </a>
                <h2 class="authorName"><a href="">
      					@if($v->incognito==1)
      					神之Coser
      					@else
      					{{$v->nickname}}
      					@endif
                </a></h2>
                @if($v->sex==1)
                <div class="authorMessage"><i class="fa fa-male authorSex"></i><span class="authorAge">24</span></div>
                @else
                <div class="authorMessage authorFemale"><i class="fa fa-female authorSex"></i><span class="authorAge">24</span></div>
                @endif
                <div class="pull-right jokeTotal">
                    <a href="" class="joke">COSER</a>
                </div>
            </div>
            <div class="cardContent">
                <a href="">
					           {{$v->content}}
				        </a>
            </div>
            <ul  class="clearfix" style="width: 320px;">
                 @foreach($v->content_pic as $imgv)
                <li class="" style="width: 100px;height: 100px;;margin: 0 0.25rem 0.25rem 0;display: inline-block;">
                  <a  data-toggle="modal" data-target=".bs-example-modal-sm{{strrchr($imgv,'_')}}">
                    <img src="{{asset('storage').$imgv}}" alt="" style="width: 100%;height: 100%;"/>
                  </a>
                </li>
                <!-- 模态框start -->
                <div class="modal fade bs-example-modal-sm{{strrchr($imgv,'_')}}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                  <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                      <img src="{{asset('storage').$imgv}}" alt="" style="width: 100%;height: 100%;"/>
                    </div>
                  </div>
                </div>
                <!-- 模态框end -->
                @endforeach
            </ul>
            <div class="navbarContent clearfix">
                <div class="navbarList pull-left">上一条</div>
                <div class="navbarList pull-left navbarListMid">下一条</div>
                <div class="navbarList pull-left">收藏本页面</div>
            </div>
            <div class="cardStats">
                <span class="cardVote">
				 <i class="voteNumber">{{$v->zannum}}</i>
				 <i class="voteText">赞</i>
				</span>
                <span class="cardComments">
					<span class="commentsdash"> · </span>
                <a href="" class="commentsTotal">
                    <i class="commentsNumber">{{$v->replynum}}</i>
                    <i class="commentsText">评论</i>
                </a>
                </span>
            </div>

            <div class="interaction clearfix">
                <ul class="pull-left interactionLeft clearfix">
                    <li class="pull-left inter1Li praise"><a href="javascript:;"><i class="fa fa-thumbs-o-up"></i></a></li>
                    <li class="pull-left inter1Li criticism"><a href="javascript:;"><i class="fa fa-thumbs-o-down"></i></a></li>
					          <input type="hidden" value="{{$v->id}}" name="hhhh" class="arid">
                </ul>
                <ul class="pull-right interactionRight clearfix">
                    <li class="pull-left inter2Li"><a href=""><i class="fa fa-weixin"></i></a></li>
                    <li class="pull-left inter2Li"><a href=""><i class="fa fa-qq"></i></a></li>
                    <li class="pull-left inter2Li"><a href=""><i class="fa fa-dribbble"></i></a></li>
                    <li class="pull-left inter2Li"><a href=""><i class="fa fa-weibo"></i></a></li>
                </ul>
            </div>
        </div>
        @endforeach
        @include('share.errors')
        @include('share.messages')
        <div class="commentsReply">
            <h3 class="commentsTitle">评论(<i>142</i>)</h3>
            <div class="myComments">
                <form action="{{url('/createReply')}}" method="post" class="myCommentsForm">
                  {{ csrf_field() }}
                    <input type="text" autocomplete="off" placeholder="我有话说..." class="myCommentsInput" name="reply">
                    <input type="submit" value="提交" class="pull-right myCommentsSubmit">
                    <input type="hidden" value="{{ $detail[0]->id }}" name="article_id">
                    <span class="wordLimit pull-right"><i class="remain">140</i>字</span>
                </form>
            </div>
            @foreach($replylst as $v)
            <div class="commentsText">
                <!--每一条评论-->
                <div class="commentsEach clearfix">
                    <a href="" class="authorImgA">
                        <img src="{{asset('storage').$v->avatar}}" alt="" class="authorImg">
                    </a>
                    <!--<div class="pull-left">-->
                        <h2 class="authorName"><a href="">{{ $v->nickname }}</a></h2>
                        @if($v->sex==1)
                        <div class="authorMessage"><i class="fa fa-male authorSex"></i><span class="authorAge">24</span></div>
                        @else
                        <div class="authorMessage authorFemale"><i class="fa fa-female authorSex"></i><span class="authorAge">24</span></div>
                        @endif
                        <div class="clearfix"></div>
                        <span class="replyContent">{{ $v->reply }}</span>
                    <!--</div>-->
                    <div class="pull-right replyNumber">{{$v->create_time}}</div>
                </div>
            </div>
            @endforeach
            @if(session()->has('alert'))
            <input type="hidden" class="hidemsg" name="" value="{{session('alert')}}">
            @endif
            <!-- 成功弹出框 -->
    </main>
    @include('share.__login')

    <div class="alert"></div>
</body>
<script src="{{asset('public/js/jquery.min.js')}}"></script>
<script src="{{asset('public/js/bootstrap.min.js')}}"></script>
<script src="{{asset('cardArticle1/js/cardArticle1.js')}}"></script>
<script src="{{asset('public/js/navbar.js')}}"></script>
</html>
<script>
$(function () {
  var hmsg = $('.hidemsg').val();
  if(hmsg=='回复成功'){
    $('.alert').html('回复成功');
    _alert();
  }
		$('[data-toggle="tooltip"]').tooltip();
		$('.cardArticle').map(function () {
			var that = $(this);
			var arid = that.find('.arid').val();
			// 点击赞赏
			$(this).find('.praise').click(function () {
														         $.ajax({
										             type: "GET",
										             url: "{{url('/ajaxzan')}}",
										             data: {arid:arid},
										             dataType: "json",
										             success: function(data){
																	 if(data.msg==1){
																		 success1();
																	 }else if(data.msg==0){
																		 alert('陛下您已经点过一次了');
																	 }else if(data.msg==2){
																		 alert('请先登录');
																	 }
																 }
										         				});
																		function success1(){
																							var className = that.find('.praise i').hasClass('fa-thumbs-up');
																							console.log('yyt'+className);
																							// 没有这个类名可以点击
																							if (!className) {
																								var html = Number(that.find('.voteNumber').html());
																								console.log(html);
																								that.find('.voteNumber').html(html + 1);
																							}
																							that.find('.praise i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
																							that.find('.criticism i').addClass('fa-thumbs-o-down').removeClass('fa-thumbs-down');
																		}

			})
			// 点击批评
			$(this).find('.criticism').click(function () {
						    $.ajax({
						             type: "GET",
						             url: "{{url('/ajaxchai')}}",
						             data: {arid:arid},
						             dataType: "json",
						             success: function(data){
													 if(data.msg==1){
														 success2();
													 }else if(data.msg==2){
														 alert('请先登录');
													 }else if(data.msg==0){
														 alert('陛下您已经点过一次了');
													 }
												 }
         				});
				function success2(){
					var className = that.find('.criticism i').hasClass('fa-thumbs-down');
					// 没有这个类名可以点击
					if (!className) {
						var html = Number(that.find('.voteNumber').html());
						console.log(html);
						that.find('.voteNumber').html(html - 1);
					}
					that.find('.criticism i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-down');
					that.find('.praise i').addClass('fa-thumbs-o-up').removeClass('fa-thumbs-up');
				}
			})
		})
	})
</script>
